<template>
  <div class="card" style="margin-bottom: 10px;">
     <div>
     <el-button type="primary" @click="handleAdd">新建文件夹</el-button>
     <el-button type="info" @click="file_upload">上传</el-button>
     <el-button type="primary" @click="back">回退</el-button>
     </div>

     <div>
       <!-- {{ this.$store.state.projectInfo.project_id }} -->

       <!-- 根文件夹显示 -->
       <el-table :data="data.Rootfolder" style="width: 100%," v-if="data.Rootvisible" @row-click="afterRoot">
         <!-- 图标 -->
         <el-table-column width="40">
           <el-icon size="25"><Folder /></el-icon>
         </el-table-column>
         <!-- 文件夹名 -->
         <el-table-column prop="folder_name" style="color: blue;"/>
       </el-table>

       <!-- 子文件夹显示 -->
       <el-table :data="data.folder" style="width: 100%," v-if="data.Foldervisible" @row-click="nextfolder">
         <!-- 图标 -->
         <el-table-column width="40">
           <el-icon size="25"><Folder /></el-icon>
         </el-table-column>
         <!-- 文件夹名 -->
         <el-table-column prop="folder_name"/>
         <!-- 删除 -->
         <el-table-column  width="100">
           <template #default="scope">
             <el-button type="danger" @click.stop="DeleteFolder(scope.row)" plain>删除</el-button>
           </template>
         </el-table-column>
       </el-table>

       <!-- 新建文件夹 -->
     <el-dialog width="35%" v-model="data.addVisible" title="新增文件夹">
       <el-form :model="data.addform" label-width="100px" label-position="right" style="padding-right: 40px">
         <el-form-item label="文件夹名">
           <el-input v-model="data.addform.folder_name" autocomplete="off" />
         </el-form-item>
       </el-form>
       <template #footer>
         <span class="dialog-footer">
           <el-button @click="data.addVisible = false">取 消</el-button>
           <el-button type="primary" @click="addsave">保 存</el-button>
         </span>
       </template>
     </el-dialog>

       <!-- 文件显示 -->
       <el-table :data="data.file" style="width: 100%,padding:0;" v-if="data.Filevisible" @row-click="Filedownload">
         <el-table-column width="40">
           <el-icon size="20"><Files /></el-icon>
         </el-table-column>
         <el-table-column prop="file_name"/>
         <!-- 删除 -->
         <el-table-column  width="100">
           <template #default="scope">
             <el-button type="danger" @click.stop="DeleteFile(scope.row)" plain>删除</el-button>
           </template>
         </el-table-column>
       </el-table>

       <!-- 文件上传 -->
     <el-dialog width="35%" v-model="data.uploadvisible" title="上传文件">
       <div>
         <input type="file" ref="fileInput" @change="handleFileChange" />
         <el-button type="info" @click="uploadFile">上传文件</el-button>
       </div>
     </el-dialog>
   </div>
 </div>
</template>

<script setup>
import { handleError, reactive } from "vue";
import { Calendar, Search } from '@element-plus/icons-vue'
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";
import {useStore} from 'vuex'
import router from "@/router"
import { ref } from 'vue';

const store=useStore()

const data=reactive({
 // 获取project_id
 project_id:store.state.projectInfo.project_id,
 //获取parent_id和folder_id
 parent_id:null,
 folder_id:'',

 Rootfolder:[],
 Rootvisible:true,

 Foldervisible:false,
 folder:[],

 addVisible:false,
 addform:{},

 Filevisible:false,
 File:[],

 //上传文件
 uploadvisible:false,
 file:[],
 file_name: '',
 staff_id:store.state.employeeInfo.staff_id,

})

// 显示根目录
const Rootload=()=>{
 axios.get('http://localhost:8088/GET/ProjectRootFolder',{
   params:{
     project_id:data.project_id
   }
 }).then(res=>{
   data.Rootfolder=res.data.data.ProjectRootFolder
   // 将当前parent_id和folder_id存入全局变量
   store.commit('update_folder_id',data.Rootfolder[0].folder_id)
   store.commit('update_parent_id',data.Rootfolder[0].parent_id)
 })
}

Rootload()

//根目录到次级目录
const afterRoot=()=>{
 data.Rootvisible=false
 //parent_id为存入全局变量的folder_id
 data.parent_id=store.state.FolderInfo.folder_id
 Folderload()
 Fileload()
}

// 显示子目录
const Folderload=()=>{
 axios.get('http://localhost:8088/GET/FolderByParentFolder',{
   params:{
     parent_id:data.parent_id
   }
 }).then(res=>{
   data.folder=res.data.data.FolderList
   //判断数组是否为空
   if(Array.isArray(data.folder) && data.folder.length === 0){
     data.Foldervisible=false
   }else{
     data.Foldervisible=true
   }
 })
}

const nextfolder=(row)=>{
 data.parent_id=row.folder_id
 Folderload()
 Fileload()
}

//新建文件夹
const handleAdd=()=>{
 data.addform={}
 data.addform.project_id=store.state.projectInfo.project_id
 data.addform.parent_id=data.parent_id
 data.addVisible=true
}
const addsave=()=>{
 axios.post('http://localhost:8088/POST/CreateNewFolder',data.addform).then(res=>{
   if(res.data.success){
     ElMessage.success("添加成功")
     console.log(res)
     if(data.parent_id==null){
       data.Rootvisible=true
       data.Foldervisible=false
       Rootload()
     }else{
       Folderload()
     }
     data.addVisible=false
   }else{
     ElMessage.error("添加失败")
   }
 })
}

//回退到根目录
const back=()=>{
 data.Foldervisible=false
 data.Filevisible=false
 data.Rootvisible=true
 Rootload()
}

//删除文件夹
const DeleteFolder=(row,event)=>{
 console.log(row.folder_id)
 const formdata = new FormData();
 formdata.append('folder_id',row.folder_id);
 axios.post('http://localhost:8088/POST/DeleteFolderByFolderId',formdata).then(res=>{
   if(res.data.success){
     ElMessage.success("删除成功")
       Folderload()
   }else{
     ElMessage.error("删除失败")
   }
 })
}

//显示文件
const Fileload=()=>{
 axios.get('http://localhost:8088/GET/FileInfoByFolder',{
   params:{
     folder_id:data.parent_id
   }
 }).then(res=>{
   data.file=res.data.data.FileInfoList
   //判断数组是否为空
   if(Array.isArray(data.file) && data.file.length === 0){
     data.Filevisible=false
   }else{
     data.Filevisible=true
   }
 })
}

//上传文件
const file_upload=()=>{
 data.uploadvisible=true
}

const handleFileChange=(event)=>{
 data.file.value = event.target.files[0];
 console.log(data.file.value)
 data.file_name=data.file.value.name
 console.log(data.file_name)
}

const uploadFile=()=>{
 const formData = new FormData();
 formData.append('file_name',data.file_name);
 formData.append('folder_id', data.parent_id);
 formData.append('staff_id', data.staff_id);
 formData.append('multipartFile', data.file.value);
 axios.post('http://localhost:8088/POST/fileUpload',formData).then(res=>{
   console.log(res)
   if(res.data.success){
     ElMessage.success("上传成功")
     data.uploadvisible=false
     Folderload()
     Fileload()
   }else{
     ElMessage.error("上传失败")
   }
 })
}

//下载文件
const Filedownload=(row)=>{
 console.log(row)
 const filepath =row.file_path;
 console.log(filepath)
 window.open(`http://localhost:8088/GET/fileDownLoad?filePath=${filepath}`,'_blank');
}


//删除文件
const DeleteFile=(row)=>{
 console.log(row.file_id)
 const formdata = new FormData();
 formdata.append('file_id',row.file_id);
 axios.post('http://localhost:8088/POST/deleteFileByFileId',formdata).then(res=>{
   if(res.data.success){
     ElMessage.success("删除成功")
       Fileload()
   }else{
     ElMessage.error("删除失败")
   }
 })
}

</script>